import { NOVEL_DATA, NOVEL_LOCAL_DATA } from './index.js'
import { debounce } from './utlis.js'
import cardItem from './cardItem.js'
const { reactive, watch } = Vue
export default {
	name: 'search',
	template: `#search`,
	components: { cardItem },
	setup() {
		const searchState = reactive({
			inpstr: '',
			searchList: [],
		})

		const searchFun = queryString => {
			let queryStringArr = queryString.split('')
			let str = '(.*?)'
			let regStr = str + queryStringArr.join(str) + str
			let reg = RegExp(regStr, 'i') // 以mh为例生成的正则表达式为/(.*?)m(.*?)h(.*?)/i
			const lenlist = [...NOVEL_DATA, ...NOVEL_LOCAL_DATA]
			for (let i = 0, len = lenlist.length; i < len; i++) {
				if (reg.test(lenlist[i].title)) {
					const index = searchState.searchList.findIndex(v => v.title === lenlist[i].title)
					if (index === -1) {
						searchState.searchList.push(lenlist[i])
					}
				}
			}
			console.log('searchState', searchState)
		}

		const oninput = debounce(searchFun, 300)
		watch(
			() => searchState.inpstr,
			val => {
				if (val.length > 0) {
					oninput(val)
				} else if (val.length <= 0) {
					console.log('asdasdasd')
					searchState.searchList.length = 0
				}
			}
		)

		return { searchState }
	},
}
